<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="userBox">
			<image :src="userInfo.avatar" class="avatar"></image>
			<text class="nickName">{{userInfo.nickname}}</text>
			<view class="myMedal">
				<text class="getLabel">已获得勋章 ：</text>
				<image :src="item.icon_url" class="medal1" v-for="(item,index) in myMedal" :key="index"></image>
			</view>
		</view>
		<view class="menuBox">
			<view class="my" :class="menuIndex==0?'active':''" @click="changeMenu(0)">
				我的
			</view>
			<view class="line">
			</view>
			<view class="all" :class="menuIndex==1?'active':''" @click="changeMenu(1)">
				全部
			</view>
		</view>
		<view class="noMedalBox" v-if="myMedal.length==0&&menuIndex==0">
			<image :src="baseurl+'user/noMedal.png'" class="noMedal"></image>
			<text class="noMedalText">暂未获得</text>
		</view>
		<view class="medalBox" v-else>
			<view class="medalItem" v-for="(item,index) in showMedal" :key="index" @click="showRule(index)">
				<image :src="item.icon_url" class="medalIcon"></image>
				<text class="medalLabel">{{item.name}}</text>
			</view>
		</view>
		<view class="medalRuleBox" v-if="isRule">
			<image :src="baseurl+'user/closeMedal.png'" class="closeMedal" @click="closeRule()"></image>
			<image :src="icon" class="medalRuleIcon"></image>
			<text class="medalRuleName">{{name}}</text>
			<text class="medalRuleDesc">{{condition}}</text>
		</view>
		
	</view>
</template>

<script>
	import Cache from '@/utils/cache'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	const app = getApp()
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					// back: {
					// 	hide: true
					// },
					bgColor: "transparent",
					title: "勋章",
					color: '#ffffff'
				},
				myMedal: [],
				allMedal: [],
				showMedal: [],
				menuIndex: 0,
				isRule: false,
				icon:'',
				name:'',
				condition:''
			}
		},
		onLoad() {
			//查询我的勋章
			this.$request.get(`UserMedal/user_medal_list`).then(res => {
				console.log(res.data.data);
				this.myMedal = res.data.data;
				this.showMedal = this.myMedal;
			})
			//全部勋章
			this.$request.get(`Medal/medal_list`).then(res => {
				console.log(res.data.data);
				this.allMedal = res.data.data;
			})
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			changeMenu(num) {
				this.menuIndex = num;
				if (num == 0) {
					this.showMedal = this.myMedal;
				}
				if (num == 1) {
					this.showMedal=[];
					this.showMedal.push(this.allMedal[0]);
				}
			},
			showRule(num) {
				this.isRule = true;
				this.icon=this.showMedal[num].icon_url;
				this.name=this.showMedal[num].name;
				this.condition=this.showMedal[num].condition;
			},
			closeRule() {
				this.isRule = false;
			}
		},
		computed: {
			...mapGetters(['userInfo', 'inviteCode', 'appConfig']),
		}
	}
</script>

<style lang="scss">
	.noMedalBox {
		width: 100%;
		margin-top: 320rpx;
		display: flex;
		flex-direction: column;

		.noMedalText {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #A3BCC4;
			margin-top: 50rpx;

		}

		.noMedal {
			margin-left: 348rpx;
			width: 56rpx;
			height: 73rpx;
		}
	}

	.medalRuleBox {
		position: absolute;
		left: 0;
		bottom: 0%;
		width: 750rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-direction: column;

		.medalRuleDesc {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 20rpx;
			color: #919191;
		}

		.medalRuleName {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 700;
			margin-top: 50rpx;
		}

		.medalRuleIcon {
			width: 124rpx;
			height: 92rpx;
			margin-top: 55rpx;
			margin-left: 313rpx;
		}

		.closeMedal {
			width: 40rpx;
			height: 40rpx;
			margin-top: 30rpx;
			margin-left: 685rpx;
		}
	}

	.medalBox {
		width: 564rpx;
		height: 142rpx;
		margin-left: 93rpx;
		margin-top: 77rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.medalItem {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			// width: calc((100% - 10px) / 3);
			margin-bottom: 122rpx;
			width: 142rpx;
			height: 142rpx;

			.medalIcon {
				width: 124rpx;
				height: 92rpx;
			}

			.medalLabel {
				font-size: 28rpx;
				font-weight: 700;
				color: #fff;
			}
		}
	}

	.menuBox {
		width: 428rpx;
		height: 63rpx;
		margin-left: 162rpx;
		margin-top: 120rpx;
		display: flex;
		justify-content: space-between;

		.active {
			border-bottom: 5rpx solid #fff;
		}

		.label {
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
		}

		.line {
			width: 1rpx;
			height: 40rpx;
			background-color: #fff;
		}

		.my {
			width: 56rpx;
			height: 63rpx;
			padding-bottom: 5rpx;
			color: #fff;
		}

		.all {
			width: 56rpx;
			height: 63rpx;
			padding-bottom: 5rpx;
			color: #fff;
		}
	}

	.userBox {
		width: 750rpx;
		height: 415rpx;

		.myMedal {
			position: absolute;
			display: flex;
			left: 222rpx;
			top: 295rpx;
			align-items: center;

			.medal1 {
				width: 46rpx;
				height: 34rpx;
				margin-left: 22rpx;
			}

			.getLabel {
				font-size: 22rpx;
				font-weight: 500;
				color: #fff;
			}
		}

		.nickName {
			font-size: 36rpx;
			font-weight: 700;
			color: #fff;
			position: absolute;
			left: 222rpx;
			top: 230rpx;
		}

		.avatar {
			position: absolute;
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
			left: 38rpx;
			top: 216rpx;
		}
	}

	.pyh-nv-box {
		position: absolute !important;
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: url('https://miantou.guguan.net/img/user/medalBg.png');
		background-size: 100% 100%;
	}
</style>